// // import { Component } from '@angular/core';
// // import { CommonModule } from '@angular/common';
// // import { DraggableDirective } from '../../directives/draggable.directive';
// // import { DraggableItem, ContainerType, WidgetType } from '../../models/layout.models';
// //
// // @Component({
// //   selector: 'app-sidebar',
// //   standalone: true,
// //   imports: [CommonModule, DraggableDirective],
// //   template: `
// //     <div class="sidebar">
// //       <div class="sidebar-header">
// //         <h2>组件库</h2>
// //       </div>
// //
// //       <div class="section">
// //         <div class="section-title">
// //           <i class="material-icons">view_quilt</i>
// //           布局容器
// //         </div>
// //         <div class="components-grid">
// //           <div *ngFor="let container of containerTypes"
// //                class="component-item"
// //                draggable="true"
// //                [appDraggable]="getContainerDragItem(container)">
// //             <div class="component-icon">
// //               <i class="material-icons">{{getContainerIcon(container)}}</i>
// //             </div>
// //             <div class="component-name">{{getContainerName(container)}}</div>
// //           </div>
// //         </div>
// //       </div>
// //
// //       <div class="section">
// //         <div class="section-title">
// //           <i class="material-icons">widgets</i>
// //           基础组件
// //         </div>
// //         <div class="components-grid">
// //           <div *ngFor="let widget of basicWidgets"
// //                class="component-item"
// //                draggable="true"
// //                [appDraggable]="getWidgetDragItem(widget)">
// //             <div class="component-icon">
// //               <i class="material-icons">{{getWidgetIcon(widget)}}</i>
// //             </div>
// //             <div class="component-name">{{getWidgetName(widget)}}</div>
// //           </div>
// //         </div>
// //       </div>
// //
// //       <div class="section">
// //         <div class="section-title">
// //           <i class="material-icons">bar_chart</i>
// //           图表组件
// //         </div>
// //         <div class="components-grid">
// //           <div *ngFor="let widget of chartWidgets"
// //                class="component-item"
// //                draggable="true"
// //                [appDraggable]="getWidgetDragItem(widget)">
// //             <div class="component-icon">
// //               <i class="material-icons">{{getWidgetIcon(widget)}}</i>
// //             </div>
// //             <div class="component-name">{{getWidgetName(widget)}}</div>
// //           </div>
// //         </div>
// //       </div>
// //     </div>
// //   `,
// //   styleUrls: ['./sidebar.component.scss']
// // })
// // export class SidebarComponent {
// //   containerTypes: ContainerType[] = [
// //     'single-column', 'two-columns', 'three-columns',
// //     'four-columns', 'tab-container', 'step-container'
// //   ];
// //
// //   basicWidgets: WidgetType[] = ['table', 'view'];
// //   chartWidgets: WidgetType[] = ['bar-chart', 'line-chart'];
// //
// //   getContainerDragItem(type: ContainerType): DraggableItem {
// //     return {
// //       id: `container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
// //       type: 'container',
// //       layoutType: type
// //     };
// //   }
// //
// //   getWidgetDragItem(type: WidgetType): DraggableItem {
// //     return {
// //       id: `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
// //       type: 'widget',
// //       widgetType: type
// //     };
// //   }
// //
// //   getContainerIcon(type: ContainerType): string {
// //     const icons: Record<ContainerType, string> = {
// //       'single-column': 'view_column',
// //       'two-columns': 'view_day',
// //       'three-columns': 'view_week',
// //       'four-columns': 'view_module',
// //       'tab-container': 'tab',
// //       'step-container': 'timeline'
// //     };
// //     return icons[type];
// //   }
// //
// //   getContainerName(type: ContainerType): string {
// //     const names: Record<ContainerType, string> = {
// //       'single-column': '单列布局',
// //       'two-columns': '双列布局',
// //       'three-columns': '三列布局',
// //       'four-columns': '四列布局',
// //       'tab-container': 'Tab页容器',
// //       'step-container': 'Step页容器'
// //     };
// //     return names[type];
// //   }
// //
// //   getWidgetIcon(type: WidgetType): string {
// //     const icons: Record<WidgetType, string> = {
// //       'table': 'table_chart',
// //       'view': 'dashboard',
// //       'bar-chart': 'bar_chart',
// //       'line-chart': 'show_chart'
// //     };
// //     return icons[type];
// //   }
// //
// //   getWidgetName(type: WidgetType): string {
// //     const names: Record<WidgetType, string> = {
// //       'table': '数据表格',
// //       'view': '数据视图',
// //       'bar-chart': '柱形图',
// //       'line-chart': '折线图'
// //     };
// //     return names[type];
// //   }
// // }
//
// import { Component } from '@angular/core';
// import { CommonModule } from '@angular/common';
// import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
//
// import { DraggableDirective } from '../../directives/draggable.directive';
// import { DraggableItem, ContainerType, WidgetType } from '../../models/layout.models';
//
// @Component({
//   selector: 'app-sidebar',
//   standalone: true,
//   imports: [CommonModule, DraggableDirective, CdkDrag, CdkDropList],
//   template: `
//     <div class="sidebar">
//       <div class="sidebar-header">
//         <h2>组件库</h2>
//       </div>
//
//       <div class="section">
//         <div class="section-title">
//           <i class="material-icons">view_quilt</i>
//           布局容器
//         </div>
//         <div
//           class="components-grid"
//           id="sidebar-list"
//           cdkDropList
//           [cdkDropListData]="containerTypes"
//           [cdkDropListConnectedTo]="['canvas-containers']">
//
//           <div
//             *ngFor="let container of containerTypes"
//             class="component-item"
//             cdkDrag
//             [cdkDragData]="getContainerDragData(container)"
//             draggable="true"
//             [appDraggable]="getContainerDragItem(container)">
//             <div class="component-icon">
//               <i class="material-icons">{{getContainerIcon(container)}}</i>
//             </div>
//             <div class="component-name">{{getContainerName(container)}}</div>
//           </div>
//         </div>
//       </div>
//
//       <div class="section">
//         <div class="section-title">
//           <i class="material-icons">widgets</i>
//           基础组件
//         </div>
//         <div class="components-grid">
//           <div *ngFor="let widget of basicWidgets"
//                class="component-item"
//                draggable="true"
//                [appDraggable]="getWidgetDragItem(widget)">
//             <div class="component-icon">
//               <i class="material-icons">{{getWidgetIcon(widget)}}</i>
//             </div>
//             <div class="component-name">{{getWidgetName(widget)}}</div>
//           </div>
//         </div>
//       </div>
//
//       <div class="section">
//         <div class="section-title">
//           <i class="material-icons">bar_chart</i>
//           图表组件
//         </div>
//         <div class="components-grid">
//           <div *ngFor="let widget of chartWidgets"
//                class="component-item"
//                draggable="true"
//                [appDraggable]="getWidgetDragItem(widget)">
//             <div class="component-icon">
//               <i class="material-icons">{{getWidgetIcon(widget)}}</i>
//             </div>
//             <div class="component-name">{{getWidgetName(widget)}}</div>
//           </div>
//         </div>
//       </div>
//     </div>
//   `,
//   styleUrls: ['./sidebar.component.scss']
// })
// export class SidebarComponent {
//   containerTypes: ContainerType[] = [
//     'single-column', 'two-columns', 'three-columns',
//     'four-columns', 'tab-container', 'step-container'
//   ];
//
//   basicWidgets: WidgetType[] = ['table', 'view'];
//   chartWidgets: WidgetType[] = ['bar-chart', 'line-chart'];
//
//   getContainerDragItem(type: ContainerType): DraggableItem {
//     return {
//       id: `container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
//       type: 'container',
//       layoutType: type
//     };
//   }
//
//   getWidgetDragItem(type: WidgetType): DraggableItem {
//     return {
//       id: `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
//       type: 'widget',
//       widgetType: type
//     };
//   }
//
//   getContainerDragData(type: ContainerType) {
//     return {
//       type: 'container',
//       containerType: type
//     };
//   }
//
//   getContainerIcon(type: ContainerType): string {
//     const icons: Record<ContainerType, string> = {
//       'single-column': 'view_column',
//       'two-columns': 'view_day',
//       'three-columns': 'view_week',
//       'four-columns': 'view_module',
//       'tab-container': 'tab',
//       'step-container': 'timeline'
//     };
//     return icons[type];
//   }
//
//   getContainerName(type: ContainerType): string {
//     const names: Record<ContainerType, string> = {
//       'single-column': '单列布局',
//       'two-columns': '双列布局',
//       'three-columns': '三列布局',
//       'four-columns': '四列布局',
//       'tab-container': 'Tab页容器',
//       'step-container': 'Step页容器'
//     };
//     return names[type];
//   }
//
//   getWidgetIcon(type: WidgetType): string {
//     const icons: Record<WidgetType, string> = {
//       'table': 'table_chart',
//       'view': 'dashboard',
//       'bar-chart': 'bar_chart',
//       'line-chart': 'show_chart'
//     };
//     return icons[type];
//   }
//
//   getWidgetName(type: WidgetType): string {
//     const names: Record<WidgetType, string> = {
//       'table': '数据表格',
//       'view': '数据视图',
//       'bar-chart': '柱形图',
//       'line-chart': '折线图'
//     };
//     return names[type];
//   }
// }
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
import { DraggableDirective } from '../../directives/draggable.directive';
import { DraggableItem, ContainerType, WidgetType } from '../../models/layout.models';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  imports: [CommonModule, CdkDrag, CdkDropList, DraggableDirective],
  template: `
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>组件库</h2>
      </div>

      <div class="section">
        <div class="section-title">
          <i class="material-icons">view_quilt</i>
          布局容器
        </div>
        <div
          class="components-grid"
          id="sidebar-list"
          cdkDropList
          [cdkDropListData]="containerTypes"
          cdkDropListSortingDisabled
          [cdkDropListConnectedTo]="['canvas-containers']">

          <div
            *ngFor="let container of containerTypes"
            class="component-item"
            cdkDrag
            [cdkDragData]="getContainerDragData(container)"
            draggable="true"
            [appDraggable]="getContainerDragItem(container)">
            <div class="component-icon">
              <i class="material-icons">{{getContainerIcon(container)}}</i>
            </div>
            <div class="component-name">{{getContainerName(container)}}</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">
          <i class="material-icons">widgets</i>
          基础组件
        </div>
        <div class="components-grid">
          <div *ngFor="let widget of basicWidgets"
               class="component-item"
               draggable="true"
               [appDraggable]="getWidgetDragItem(widget)">
            <div class="component-icon">
              <i class="material-icons">{{getWidgetIcon(widget)}}</i>
            </div>
            <div class="component-name">{{getWidgetName(widget)}}</div>
          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-title">
          <i class="material-icons">bar_chart</i>
          图表组件
        </div>
        <div class="components-grid">
          <div *ngFor="let widget of chartWidgets"
               class="component-item"
               draggable="true"
               [appDraggable]="getWidgetDragItem(widget)">
            <div class="component-icon">
              <i class="material-icons">{{getWidgetIcon(widget)}}</i>
            </div>
            <div class="component-name">{{getWidgetName(widget)}}</div>
          </div>
        </div>
      </div>
    </div>
  `,
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent {
  containerTypes: ContainerType[] = [
    'single-column', 'two-columns', 'three-columns',
    'four-columns', 'tab-container', 'step-container'
  ];

  basicWidgets: WidgetType[] = ['table', 'view'];
  chartWidgets: WidgetType[] = ['bar-chart', 'line-chart'];

  getContainerDragItem(type: ContainerType): DraggableItem {
    return {
      id: `container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
      type: 'container',
      layoutType: type
    };
  }

  getWidgetDragItem(type: WidgetType): DraggableItem {
    return {
      id: `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
      type: 'widget',
      widgetType: type
    };
  }

  getContainerDragData(type: ContainerType) {
    return {
      type: 'container',
      containerType: type
    };
  }

  getContainerIcon(type: ContainerType): string {
    const icons: Record<ContainerType, string> = {
      'single-column': 'view_column',
      'two-columns': 'view_day',
      'three-columns': 'view_week',
      'four-columns': 'view_module',
      'tab-container': 'tab',
      'step-container': 'timeline'
    };
    return icons[type];
  }

  getContainerName(type: ContainerType): string {
    const names: Record<ContainerType, string> = {
      'single-column': '单列布局',
      'two-columns': '双列布局',
      'three-columns': '三列布局',
      'four-columns': '四列布局',
      'tab-container': 'Tab页容器',
      'step-container': 'Step页容器'
    };
    return names[type];
  }

  getWidgetIcon(type: WidgetType): string {
    const icons: Record<WidgetType, string> = {
      'table': 'table_chart',
      'view': 'dashboard',
      'bar-chart': 'bar_chart',
      'line-chart': 'show_chart'
    };
    return icons[type];
  }

  getWidgetName(type: WidgetType): string {
    const names: Record<WidgetType, string> = {
      'table': '数据表格',
      'view': '数据视图',
      'bar-chart': '柱形图',
      'line-chart': '折线图'
    };
    return names[type];
  }
}
